<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频详情</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css
    ">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/videoDetail.css">
</head>

<body>
    <!-- 导航菜单 -->
    <nav>
        <div class="main">
            <img src="../img/public/logo.png" alt="" class="logo">
            <ul>
                <li><a href="../index.html">首页</a></li>
                <li class="check"><a href="./online.html">同步课程</a></li>
                <li><a href="javascript:;">精品课程</a></li>
            </ul>
            <div class="search">
                <div class="left">课程<i class="iconfont icon-down"></i>
                </div>
                <input type="text" placeholder="搜索感兴趣的内容">
                <img src="../img/public/search.png" alt="">
            </div>
            <div class="login">
                <a href="javascript:;">登陆</a>
                /
                <a href="javascript:;">注册</a>
            </div>
            <div class="user">
                <img src="../img/login/user.png" alt="">
                <div class="userlist">
                    <ul>
                        <li>我是用户名</li>
                        <li>课程中心</li>
                        <li>订单中心</li>
                        <li>资金管理</li>
                        <li>个人中心</li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <div class="all">
        <div class="crumbs">
            <span>首页</span>
            <span>></span>
            <span>同步课堂</span>
            <span>></span>
            <span>视频详情</span>
        </div>
    </div>
    <!-- 主体内容 -->
    <main>
        <div class="classDetail">
            <div class="left">
                <img src="../img/videoDetail/san.png" alt="">
            </div>
            <div class="right" id="courseinfo">
                <!-- <p class="title">[2019年秋季] 初三数学班</p>
                <ul>
                    <li>年级科目：初三数学</li>
                    <li>地区：北京</li>
                    <li>开课时间：09月30日—12月20日</li>
                    <li class="price">
                        <span>¥199</span>
                        <span>报名学习</span>
                    </li>
                </ul> -->
            </div>
        </div>
        <div class="row introduce" id="teacherinfo">
            <p>授课师资</p>
            <div class="left">
                <p class="img">
                    <img src="" alt="" style="border-radius:50%;width: 100%;height: 100%;">
                </p>
                <p class="right">
                    <span>李晓明</span>
                    <span>小U课堂高级讲师</span>
                </p>

            </div>
            <div class="right">
                多年IT行业从业经验，精通常用的Web开发技术;熟悉主流的CMS、商城、论坛 等PHP开源产品，具有丰富的建站及二次开发经验，多个大型ERP系统的开发实践经验;精通常用的PHP开发框架，对服务器架构及服务器日常运维等方面有一 定的研究。
            </div>
        </div>
        <div class="row title">
            <span class="active">课程目录</span><span>课程详情</span>
        </div>
        <div class="classlist active">
            <div class="content">
                <div class="detail">
                    <ul class="active" id="videolist">
                        
                       <!--  <li>
                            <p>
                                <i class="iconfont icon-bofang"></i>
                                <span>第3节：钠及其化合物</span>
                            </p>
                            <p>2020.12.10 20：00开播</p>
                        </li> -->
                        
                    </ul>
                </div>
            </div>
            <div class="bottom">
               
            </div>
        </div>
        <div class="classlist">
            <img src="../img/videoDetail/detail.png" alt="">
        </div>
    </main>

    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照
                    | 教师资格证公示

                </p>
                <p>
                    京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备
                    01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
                    食品经营 许可证：JY13101140088888
                </p>
                <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>

   

    <!-- <script src="../js/ujiuye.js"></script> -->
</body>

</html>
<script src="../utils/jquery.min.js"></script>
<script src="../utils/ajax.js"></script>
<script>
    // console.log(getquery());
    let {cid}=getquery()
    let authorization=localStorage.getItem("t")

    // 课程信息
    getcourseinfo()
    async function getcourseinfo(){
        
        if(!cid){
            alert("请求出错")
            location.href="../index.html"
            return
        }


        let [err,results]=await ajax({
            url:api_url+"/courseinfo",
            data:{
                cid
            }
        })

        // console.log(results);
        if(err){
            alert("课程信息出错了")
            return
        }
        if(results.status!=200){
            alert(results.msg)
            return
        }
        
        $("#courseinfo").html(`<p class="title">${results.results[0].title}</p>
                <ul>
                    <li>年级科目：${results.results[0].grade_name}${results.results[0].subject_name}</li>
                    <li>地区：${results.results[0].area_name}</li>
                    <li>开课时间：${results.results[0].intro}</li>
                    <li class="price">
                        <span>¥${results.results[0].price}</span>
                        <span>报名学习</span>
                    </li>
                </ul>`)


    }

    // 老师信息
    getteacherinfo()
    async function getteacherinfo(){
        
        if(!cid){
            alert("请求出错")
            location.href="../index.html"
            return
        }


        let [err,results]=await ajax({
            url:api_url+"/teacherinfo",
            data:{
                cid
            }
        })

        console.log(results);
        if(err){
            alert("老师信息出错了")
            return
        }
        if(results.status!=200){
            alert(results.msg)
            return
        }
        
        $("#teacherinfo img").attr("src",results.results[0].head_photo_url)
        $("#teacherinfo span:eq(0)").text(results.results[0].realname)
        $("#teacherinfo>.right").text(results.results[0].intro)


    }

    // 视频列表
    getvideolist()
    async function getvideolist(){
        
        if(!cid){
            alert("请求出错")
            location.href="../index.html"
            return
        }

        // 发送请求
        let [err,results]=await ajax({
            url:api_url+"/videolist",
            data:{
                cid
            }
        })

        console.log(results);
        if(err){
            alert("视频列表信息出错了")
            return
        }
        if(results.status!=200){
            alert(results.msg)
            return
        }
        
        // 渲染数据
        let str=``
        results.results.forEach(value => {
            str+=` <li>
                        <a href="./videoPlay.html?vid=${value.id}&cid=${value.cid}">
                            <p>
                                <i class="iconfont icon-bofang"></i>
                                <span>第${value.vnum}节：${value.video_title}</span>
                            </p>
                            <p>2020.12.10 20：00开播</p>
                        </a>
                    </li>`
        });
      
        $("#videolist").html(str)

    }


    $("#courseinfo").on("click","span:eq(1)",async function(){

        // 从本地存储中拿出token
        if(!authorization){
            alert("请登录")
            location.href="./loginAndRegister/login.html"
            return
        }
       
        // 发送ajax请求
        let [err,results]=await ajax({
            type:"post",
            url:api_url+"/study",
            data:{
                cid
            },
            headers:{
                authorization
            }
            
        })

        console.log(results);
        if(err){
            alert("报名信息出错了")
            return
        }
        if(results.status!=200){
            alert(results.msg)
            return
        }

        // 报名成功
        alert(results.msg)
        
    })

</script>